<template>
  <view class="indexBody" :style="{ minHeight: height + 'px' }">
    <custom-navbar :immersive="true" title="社发配送" color="#333" :showBack="false"> </custom-navbar>
    <view class="shoppingBox_header" :style="{ paddingTop: `${navbarHeight}px` }"> </view>
    <view class="content">
      <view class="userBox flex">
        <view class="img" @click="goUserInfo">
          <image :src="user.avatar || '/static/image/avatar.png'" style="width: 100%; height: 100%" />
        </view>
        <view class="userInformation" @click="goUserInfo">
          <view class="name">{{ user ? user.userName : '未登录' }}</view>
          <view class="phone">{{ user ? user.phone : '未登录' }}</view>
          <!-- <view class="flex" @click="changePass">
            <view class="change-pass" @tap="setUpdate">修改密码</view>
          </view> -->
        </view>
        <view class="updatePassword">
          <!-- <image src="/static/image/code_icon.png" mode="widthFix" @click="showQrCode" /> -->
          <image src="/static/image/mine_set.png" mode="widthFix" @click="goSetting" style="margin-left: 20rpx" />
        </view>
      </view>
    </view>
    <view class="content_middle">
      <view class="content_middle_charge">
        <view class="content_middle_charge_value">0</view>
        <view class="content_middle_charge_label">余额</view>
      </view>
      <view class="content_middle_charge">
        <view class="content_middle_charge_value">0</view>
        <view class="content_middle_charge_label">积分</view>
      </view>
      <view style="flex: 2"></view>
    </view>
    <view class="content_order">
      <view class="content_order_item" v-for="(item, index) in orderTypes" :key="index" @click="goOrder(item.type)">
        <view class="content_order_item_icon"><image :src="item.icon" mode="widthFix" /></view>
        <view>{{ item.name }}</view>
      </view>
    </view>
    <view class="content_model">
      <view class="content_model_title">我的功能</view>
      <view class="content_model_row" @click="goCoupon">
        <image src="/static/image/mine_coupon_icon.png" mode="widthFix" />
        <view class="content_model_row_txt">券包</view>
        <uni-icons type="right" size="18" color="#999" />
      </view>
      <view class="content_model_line"></view>
      <view class="content_model_row">
        <image src="/static/image/mine_recharge_icon.png" mode="widthFix" />
        <view class="content_model_row_txt">兑换中心</view>
        <uni-icons type="right" size="18" color="#999" />
      </view>
    </view>
    <view class="content_pic">
      <image src="https://sfpc.lhbigdata.com:8443/file/000upload/image/mine_recharge_pic.png" mode="widthFix" />
    </view>

    <uni-popup ref="popup">
      <view class="pop-pic"><image :src="qrCodeImg" mode="widthFix" show-menu-by-longpress /></view>
    </uni-popup>
  </view>
</template>

<script>
import { getToken, getUserInfo, clearToken } from '@/service/auth.js'

import { getQRCode } from '../../../service/api/mine'
import { getScreen } from '../../../service/auth'

import navbarMixin from '@/mxins/navbar.js'

const form = {
  id: null,
  customerTypeId: null,
  userId: null,
  customerAreaId: null,
  deptId: null,
  saleSystemId: null,
  scustomerName: '',
  visitLineName: '',
  userName: '',
  customerTypeName: '',
  address: '',
  type: '',
}

export default {
  mixins: [navbarMixin],
  components: {},
  data() {
    return {
      user: {},

      showCode: false,
      orderViewUsing: {},
      update: {
        oldPassword: '',
        newPassword: '',
      },
      height: 0,
      reportBoxHeight: 0,
      personnelHeight: 0,
      personnelRetate: 0,
      retate: 0,
      creditLevelList: [],
      codeImg: '',
      creditData: {},

      imageStyles: {
        width: 200,
        height: 200,
      },
      form: {
        id: null,
        customerTypeId: null,
        userId: null,
        customerAreaId: null,
        deptId: null,
        saleSystemId: null,
        scustomerName: '',
        visitLineName: '',
        userName: '',
        customerTypeName: '',
        address: '',
      },
      mask: false,
      qrCodeImg: '',
      val: '',
      orderTypes: [
        { name: '已支付', icon: '/static/image/mine_zf.png', type: 1 },
        { name: '已送货', icon: '/static/image/mine_sh.png', type: 2 },
        { name: '已验收', icon: '/static/image/mine_ys.png', type: 3 },
        { name: '已取消', icon: '/static/image/mine_qx.png', type: 4 },
        { name: '全部', icon: '/static/image/mine_all.png', type: 0 },
      ],
    }
  },
  onLoad() {},
  onShow() {
    const data = getUserInfo()
    this.user = JSON.parse(data)
  },
  created() {
    const { height } = getScreen()
    this.height = height
  },

  methods: {
    goUserInfo() {
      if (this.user) {
        uni.navigateTo({
          url: '/pageShopping/userInfo/index',
        })
      }
    },
    getWxCode() {
      const _that = this
      wx.login()
        .then(res => {
          _that.val = 'http://172.168.1.12:8071/#/?userId=' + _that.user.userId + '&code=' + res.code
        })
        .catch(err => {
          console.log('报错信息')
          console.log(err)
        })
    },
    showQrCode() {
      console.log('show')
      this.$refs.popup.open()
    },
    onGet() {
      const data = getUserInfo()
      this.user = JSON.parse(data)
    },

    select(e) {
      this.filePath = e.tempFilePaths[0]
    },

    // personnel() {
    //   this.personnelHeight = this.personnelHeight ? 0 : 270
    //   this.personnelRetate = this.personnelHeight ? 90 : 0
    // },
    goCoupon() {
      uni.navigateTo({
        url: '/pageShopping/coupon/receivedList',
      })
    },
    quit() {
      uni.showModal({
        content: '是否退出登录',

        success: res => {
          if (res.confirm) {
            uni.removeStorageSync('userPhone')
            uni.removeStorageSync('userPassward')
            this.$store.commit('clearCart')
            clearToken()
            uni.reLaunch({ url: '/pages/login/index' })
          } else if (res.cancel) {
          }
        },
      })
    },

    goSetting() {
      uni.navigateTo({ url: '/pageShopping/setting/index' })
    },
    goOrder(type) {
      getApp().globalData.tabParams = { type: type }
      uni.switchTab({
        url: '/pages/mine/order/index',
      })
    },
    changePass() {
      uni.navigateTo({
        url: '/pageShopping/updatePassword/index',
      })
    },
    getQR() {
      const _this = this
      //生成小程序二维码
      const data = {
        path: `/pages/register/index?userId=${this.user.userId}`,
        companyCode: '000',
      }
      getQRCode(data).then(res => {
        // console.log('获取二维码',res)
        //   let base64 = wx.arrayBufferToBase64(res.data.qr_code)

        this.qrCodeImg = 'data:image/PNG;base64,' + res.data.qr_code
        // console.log('二维码',this.codeImg)
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.updatePassword {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;

  padding: 5rpx 20rpx 5rpx 30rpx;
  border-top-left-radius: 30rpx;
  border-bottom-left-radius: 30rpx;
  image {
    width: 40rpx;
    height: 40rpx;
    margin-left: 10rpx;
  }
}

.promotionCode {
  position: absolute;
  top: 0;
  right: 0;
  image {
    width: 80rpx;
    height: 80rpx;
  }
}

.indexBody {
  position: relative;
  font-family: PingFangSC;
  background: linear-gradient(to bottom, #eefff2 0%, #f6f6f6 30%, #f6f6f6 70%);
  width: 100vw;
  .content {
    padding: 30rpx 0 0 30rpx;
    .userBox {
      position: relative;
      z-index: 1;
      align-items: center;
      .img {
        background: white;
        width: 128rpx;
        height: 128rpx;
        border-radius: 50%;
        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .userInformation {
        margin-left: 26rpx;
        .name {
          color: #333;
          font-size: 40rpx;
        }
        .phone {
          margin-top: 8rpx;
        }
        .change-pass {
          background-color: white;
          color: #26bb55;
          border-radius: 30rpx;
          padding: 3rpx 10rpx;
          font-size: 26rpx;
        }
        .bor {
          background: rgba(255, 255, 255, 0.2);
          min-width: 90rpx;
          height: 30rpx;
          border-radius: 30rpx;
          color: rgba(255, 255, 255, 0.8);
          font-size: 20rpx;
          margin-right: 10rpx;
        }
      }
    }
  }
  .content_middle {
    background-image: url('https://bw000.zjjqf.cn/file/000upload/image/mine_jifen_bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    height: 188rpx;
    margin: 30rpx 20rpx 0;
    display: flex;
    align-items: center;
    &_charge {
      flex: 1;
      text-align: center;
      color: #c57f36;
      &_value {
        font-size: 32rpx;
        font-weight: bold;
      }
      &_label {
        font-size: 26rpx;
      }
    }
  }
  .content_order {
    display: flex;
    align-items: center;
    background-color: white;
    padding: 30rpx 0;
    margin: 20rpx;
    border-radius: 10rpx;
    &_item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      &_icon {
        width: 84rpx;
        height: 84rpx;
        margin-bottom: 12rpx;
      }
    }
  }
  .content_model {
    background-color: white;
    margin: 20rpx;
    padding: 30rpx 30rpx 0 30rpx;
    border-radius: 10rpx;
    font-weight: 500;
    &_title {
      font-size: 32rpx;
    }
    &_row {
      display: flex;
      align-items: center;
      padding: 30rpx 0;

      image {
        width: 48rpx;
        height: 48rpx;
      }
      &_txt {
        margin-left: 20rpx;
        font-size: 32rpx;
        flex: 1;
      }
    }
    &_line {
      height: 2rpx;
      background-color: #f5f5f5;
    }
  }
  .content_pic {
    /* box-shadow: 0 2rpx 8rpx      rgba(0, 0, 0, 0.05); */
    margin: 0 20rpx;
  }
  .bottom {
    position: fixed;
    bottom: 50rpx;
    left: 20rpx;

    right: 20rpx;
    button {
      background-color: white;
    }
  }
}
.pop-pic {
  width: 300rpx;
}
</style>
